<template>
    <view class="container">
        <u-sticky>
      <view class="add-user">
        <u-button type="primary" @click="addUser">添加员工</u-button>
      </view>
    </u-sticky>
      <view class="user-list">
        <view class="user-item" v-for="(user, index) in userList" :key="user.id">
          <view class="user-card">
            <u-image class="user-avatar" height="100" width="100" :src="'http://101.43.223.224:8765/image/getImageById?id='+user.avatarId"></u-image>
            <view class="user-info">
              <view class="user-name">{{ user.userName }}</view>
              <view class="user-loginName">登录名称: {{ user.loginName }}</view>
              <view class="user-phone">手机号: {{ user.phone }}</view>
              <view class="user-email">邮箱: {{ user.email }}</view>
              <view class="user-age">年龄: {{ user.age }}</view>
              <view class="user-createTime">创建时间: {{ user.createTime }}</view>
              <view class="user-updateTime">修改时间: {{ user.updateTime }}</view>
              <view class="user-lastLoginTime">最后登录时间: {{ user.lastLoginTime }}</view>
            </view>
            <view class="user-action">
                <u-button type="default" @click="authorizeUser(index)">授权</u-button> <!-- Add authorize button -->
                <u-button type="primary" @click="editUser(index)">
                <u-icon color="black" name="edit-pen-fill"></u-icon> <!-- Replace edit button with icon -->
              </u-button>
              <u-button type="warn" @click="deleteUser(index)">删除</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        userList: []
      }
    },
    mounted() {
      this.getUserList()
    },
    methods: {
        authorizeUser(index) {
    uni.showToast({
      title: '请到电脑端进行授权', // Show authorization message
      icon: 'none'
    })
  },
      saveUser(user) {
        uni.request({
          url: 'http://localhost:8989/sysUser/saveUser',
          method: 'POST',
          data: user,
          success: (res) => {
            uni.showToast({
              title: '添加成功',
              icon: 'none'
            })
            this.getUserList()
          }
        })
      },
      getUserList() {
        uni.request({
          url: 'http://localhost:8989/sysUser/getUserByPage',
          success: (res) => {
            this.userList = res.data.data.content
          }
        })
      },
      updateUser(user) {
        uni.request({
          url: 'http://localhost:8989/sysUser/updateUser',
          method: 'POST',
          data: user,
          success: (res) => {
            uni.showToast({
              title: '修改成功',
              icon: 'none'
            })
            this.getUserList()
          }
        })
      },
      addUser() {
        uni.navigateTo({
          url: '/pages/useradd'
        })
      },
      editUser(index) {
        uni.navigateTo({
          url: '/pages/editUser/editUser?id=' + this.userList[index].id
        })
      },
      deleteUser(index) {
        uni.request({
          url: 'http://localhost:8989/sysUser/delUserById',
          method: 'POST',
          data: {
            id: this.userList[index].id
          },
          success: (res) => {
            uni.showToast({
              title: '删除成功',
              icon: 'none'
            })
            this.userList.splice(index, 1)
          }
        })
      }
    },
    onShow: function() {
    	this.getUserList()
    },
  }
  </script>
  
  <!-- Add style here if needed -->
  <style>
  .container {
    padding: 20rpx;
  }
  
  .user-list {
    margin-bottom: 20rpx;
  }
  
  .user-item {
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .user-card { /* Add card styling */
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    padding: 20rpx;
    display: flex;
    align-items: center;
  }
  
  .user-avatar {
    width: 100px;
    height: 100px;
    margin-right: 20rpx;
  }
  
  .user-avatar u-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  
  .user-info {
    flex: 1;
  }
  
  .user-name {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  
  .user-action u-button {
    margin-left: 20rpx;
  }
  
  </style>
